﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="control.css" rel="stylesheet" />
</head>
<body>
    
<div class="split" data-orientation="vertical" data-limit="50" data-position="70%">

        <div class="tree-view-wrapper panel-left">
            <x-controlbar>
                <x-action class="add-value" tabindex="0"><i class="fa fa-plus"></i> Add</x-action>
                <x-action class="refresh" tabindex="0"><i class="fa fa-refresh"></i> Refresh</x-action>
                <input type="text" aria-label="search by key" placeholder="Search by key..." id="searchlist"/>
            </x-controlbar>
            <div id="treeView2" class="code-text">
                <div class="explorer-menu" id="localStorage" style="display:block;">
                    <table class="table-resources resources-features-list table-resources-localStorage">
                        <thead>
                            <tr class="trHead">
                                <th scope="col">Ok?</th>
                                <th scope="col" class="th50">Key</th>
                                <th scope="col" class="th50">Value</th>
                            </tr>
                        </thead>
                        <tbody id="localStorageTable">
                            
                        </tbody>
                    </table>
                    <div class="new-entry new-entry-localstorage">
                        <input aria-label="key" type="text" class="new-key-localstorage" placeholder="Key...">
                        <input aria-label="value" type="text" class="new-value-localstorage" placeholder="Value...">                        
                    </div>
                </div>
                <div class="explorer-menu" id="sessionStorage" style="display:none;">
                    <table class="table-resources resources-features-list table-resources-sessionStorage">
                        <thead>
                            <tr class="trHead">
                                <th scope="col">Ok?</th>
                                <th scope="col" class="th50">Key</th>
                                <th scope="col" class="th50">Value</th>
                            </tr>
                        </thead>
                        <tbody id="sessionStorageTable">
                            
                        </tbody>
                    </table>
                    <div class="new-entry new-entry-sessionstorage">
                        <input aria-label="key" type="text" class="new-key-sessionstorage" placeholder="Key...">
                        <input aria-label="value" type="text" class="new-value-sessionstorage" placeholder="Value...">                        
                    </div>
                </div>
                <div class="explorer-menu" id="cookies" style="display:none;">
                    <table class="table-resources resources-features-list table-resources-cookies">
                        <thead>
                            <tr class="trHead">
                                <th scope="col">Ok?</th>
                                <th scope="col" class="th50">Key</th>
                                <th scope="col" class="th50">Value</th>
                            </tr>
                        </thead>
                        <tbody id="cookiesTable">
                            
                        </tbody>
                    </table>
                    <div class="new-entry new-entry-cookies">
                        <input aria-label="key" type="text" class="new-key-cookies" placeholder="Key...">
                        <input aria-label="value" type="text" class="new-value-cookies" placeholder="Value...">                        
                    </div>
                </div>
            </div>
        </div>
        <div class="style-view-wrapper panel-right code-text">
            <div id="accordion-resourceExplorer">
                <h3 class="open-menu active-menu" data-menu="localStorage"><i class="fa fa-archive" aria-hidden="true"></i> Local Storage</h3>
                <h3 class="open-menu" data-menu="sessionStorage"><i class="fa fa-database" aria-hidden="true"></i> Session Storage</h3>
                <h3 class="open-menu" data-menu="cookies"><i class="fa fa-asterisk" aria-hidden="true"></i> Cookies</h3> 
            </div>
        </div>
    </div>

</body>
</html>
